<template>
  <div style="padding: 20px">
    <Alert message="标签示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>data(数据源): [{title: 标题;content: 内容}]</div>
        <div>activeKey: 默认展开项</div>
      </template>
    </Alert>
    <div class="demoTittle">折叠面板(collapse)</div>
    <div class="demoTittle2">- 可以同时展开多个面板，这个例子默认展开了第一个。</div>
    <div class="demoTittle2">-也可做特殊的折叠面板，只允许单个内容区域展开。</div>
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel key="1" header="This is panel header 1">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="This is panel header 2">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
    <div style="height: 20px"></div>
    <div class="demoTittle2">- 分段式折叠面板。</div>
    <div class="demoTittle2"
      >- data: [[{title: 标题;content: 内容}],{title: 标题;content: 内容}]</div
    >
    <a-collapse v-model:activeKey="activeKey2" @change="changeActivekey">
      <a-collapse-panel key="1" header="This is panel header 1">
        <a-collapse default-active-key="4">
          <a-collapse-panel key="4" header="This is panel nest panel">
            <p>{{ text }}</p>
          </a-collapse-panel>
        </a-collapse>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="This is panel header 2">
        <p>{{ text }}</p>
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3">
        <p>{{ text }}</p>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import type { SelectProps } from 'ant-design-vue';
  import { UserOutlined } from '@ant-design/icons-vue';
  import { ref, watch } from 'vue';

  const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
  const activeKey = ref(['1']);
  const activeKey2 = ref(['1']);

  watch(activeKey, (val) => {
    console.log(val);
  });
  const changeActivekey = (key: string) => {
    console.log(key);
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    color: #494a4a;
    font-size: 14px;
    margin-bottom: 18px;
  }
</style>
